<template>
	<div class="goods-list">
		<!-- 把div标签改造成 router-link-->
		<!-- 
		* 在网页中：有两种跳转方式
		* 1.使用a标签的形式叫做标签跳转
		* 2.使用window.location.href的形式，叫做编程式导航
		*  -->
		<!-- <router-link class="goodsitem" v-for="item in list" :key="item.id"
		:to="'/home/good/'+item.id" tag="div">
			<img :src="item.url">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.new_price}}</span>
					<span class="old">￥{{item.old_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>还剩{{item.stock}}件</span>
				</p>
			</div>
		</router-link>
		 -->
		<!-- 第二种形式：编程式跳转 -->
		<a class="goodsitem" v-for="item in list" :key="item.id" @click="getroute(item.id)">
			<img :src="item.url">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.new_price}}</span>
					<span class="old">￥{{item.old_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>还剩{{item.stock}}件</span>
				</p>
			</div>
		</a>
	
	    <!-- 加载更多按钮 -->
		<mt-button type="danger" size="large" @click="getmore">加载更多</mt-button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				list:[],//存放商品详情列表
				pageindex:1,//默认页码为1
			}
		},
		created(){
			this.getGoods();
		},
		methods:{
			getGoods(){
				// 获取商品详情,注意！！！
				// 这里使用的是get，服务器那里使用req.query.pageindex来获取paeindex
				this.axios.get('http://localhost:3000/api/getgoods?pageindex='+this.pageindex)
				.then((res) => {
					if(res.data.status===0){
						res.data.data.forEach(
						(item) => {
							this.list.push({
								id:item.id,
								title:item.title,
								url:item.url,
								add_time:item.add_time,
								summary:item.summary,
								new_price:item.new_price,
								old_price:item.old_price,
								stock:item.stock,
							})
						})
					}
				})
			},
			// 加载更多
			getmore(){
				this.pageindex++;
				this.getGoods();
			},
			// 编程式跳转
			getroute(id){
				// 有多种方式，简单的，对象的，命名的，参数的，去查查vue-router
				this.$router.push({path:'/home/good/'+id});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list{
		display: flex;
		flex-wrap: wrap;//规定灵活的项目在必要的时候拆行或拆列
		justify-content: space-between;
		padding: 7px;
		.goodsitem{
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 3px #ccc;
			margin: 4px 0;
			// padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 293px;
			img{
				width: 100%;
				height: 190px;
			}
			.title{
				font-size: 14px;
			}
		}
		.info{
			background-color: #ccc;
			p{
				margin: 0;
				padding: 5px;
			}
			.price{
				.now{
					font-weight: bold;
					color: red;
					font-size: 16px;
				}
				.old{
					// 中划线
					text-decoration: line-through;
					font-size: 12px;
					margin-left: 10px;
				}
			}
			.sell{
				justify-content: space-between;
				display: flex;
				font-size: 13px;
			}
		}
	}
</style>
